<template>
  <div class="bar">
    <div class="traffic">
      <div class="red" @click="close"></div>
      <div class="yellow" @click="min"></div>
      <div class="green" @click="max"></div>
    </div>
    <p class="title">{{ title }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    min() {
      this.$emit('min')
    },
    max() {
      this.$emit('max')
    }
  }
}
</script>

<style lang="less" scoped>
.bar {
  position: relative;
  background-color: rgba(63, 58, 66);
  padding: 10px;
  text-align: center;

  .title {
    color: white;
  }

  .traffic {
    position: absolute;
    left: 0;

    top: 50%;
    transform: translate(10px, -50%);
    display: flex;
    width: 40px;
    justify-content: space-between;
    // align-content: space-between;
    div {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      cursor: pointer;
      // flex: 1;

      &.red {
        background-color: rgb(239, 68, 68);
      }
      &.yellow {
        background-color: rgb(245, 158, 11);
      }
      &.green {
        background-color: rgba(16, 185, 129);
      }
    }
  }
}
</style>